<template>
  <mt-navbar :title="type === 1 ? '选择报名权益' : '报名权益'"> </mt-navbar>
  <view class="safety-150 px-32rpx pt-24rpx">
    <view v-if="type === 2" class="mb-24rpx">
      <mt-title class="mb-24rpx">
        <template #title>
          <text class="text-32rpx font-bold">我购买的</text>
        </template>
      </mt-title>
      <view v-for="item in myPayList" :key="item.id" class="list-li bg-#ffffff p-32rpx rd-8rpx mb-24rpx">
        <view class="text-32rpx text-#1C213E mb-40rpx">{{ item.rightsName }}</view>
        <view class="text-40rpx text-#1484EE font-bold mb-40rpx">￥{{ amountTransfer(item.rightsAmount) }}</view>
        <view class="flex items-center justify-between">
          <view class="flex items-center">
            <text class="text-28rpx text-#727687">已有{{ item.rightsSignUpNum }}人购买</text>
            <view v-if="item.avatarUrls" class="relative h-40rpx ml-20rpx">
              <image
                v-for="(son, sidx) in item.avatarUrls.slice(0, 5)"
                :key="sidx"
                class="circle"
                :style="{ left: sidx * 30 + 'rpx' }"
                :src="son ? son : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <mt-title>
        <template #title>
          <text class="text-32rpx font-bold">其他权益</text>
        </template>
      </mt-title>
    </view>
    <view
      v-for="item in activityRightsList"
      :key="item.id"
      class="list-li bg-#ffffff p-32rpx rd-8rpx mb-24rpx"
      :class="{ disabled: type === 1 && item.rightsRemainNum <= 0, active: currentId === item.id }"
      @click="handleChange(item)"
    >
      <view class="text-32rpx text-#1C213E mb-40rpx">{{ item.rightsName }}</view>
      <view class="text-40rpx text-#1484EE font-bold mb-40rpx">￥{{ amountTransfer(item.rightsAmount) }}</view>
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <text class="text-28rpx text-#727687">已有{{ item.rightsSignUpNum }}人购买</text>
          <view v-if="item.avatarUrls" class="relative h-40rpx ml-20rpx">
            <image
              v-for="(son, sidx) in item.avatarUrls.slice(0, 5)"
              :key="sidx"
              class="circle"
              :style="{ left: sidx * 30 + 'rpx' }"
              :src="son ? son : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'"
            ></image>
          </view>
        </view>
        <view v-if="type === 1" class="text-28rpx">
          <text v-if="item.rightsRemainNum >= 10" class="text-#1484EE">还剩{{ item.rightsRemainNum }}名额</text>
          <text v-if="item.rightsRemainNum > 0 && item.rightsRemainNum < 10" class="text-#F94B4A">还剩{{ item.rightsRemainNum }}名额</text>
          <text v-if="item.rightsRemainNum <= 0" class="text-#ADB0BD">已售罄</text>
        </view>
      </view>
    </view>

    <view v-if="type === 1" class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="flex-1" :shake="false" @click="openPayPopup"> 付款 </mt-button>
    </view>

    <mt-pay-popup ref="payRef" @confirm="handlePayConfirm"></mt-pay-popup>
  </view>
</template>

<script setup>
import { activityaddServiceProviderSignUp } from '@/subActivity/api/index';
import { amountTransfer, initiationPayments } from '@/utils/tools';

const currentId = ref('');
function handleChange(item) {
  if (type.value === 2) return;
  if (item.rightsRemainNum <= 0) return;
  currentId.value = item.id;
}

const payRef = ref();
function openPayPopup() {
  if (!currentId.value) {
    uni.showToast({
      icon: 'none',
      title: '请选择报名权益'
    });
    return;
  }
  const obj = activityRightsList.value.find((item) => item.id === currentId.value);

  payRef.value.open({
    amount: obj.rightsAmount
  });
}

async function handlePayConfirm(payType) {
  try {
    const obj = activityRightsList.value.find((item) => item.id === currentId.value);

    const params = {
      activityId: activityId.value,
      rightsId: obj.id,
      rightsName: obj.rightsName,
      contentStatus: obj.contentStatus,
      paymentAmount: obj.rightsAmount,
      paymentChannel: payType
    };
    let res = null;

    payRef.value.close();
    if (payType === 1) {
    } else if (payType === 2) {
      res = await activityaddServiceProviderSignUp(params);
      await initiationPayments(payType, res.data.orderStr);
      uni.redirectTo({
        url: '/subActivity/pages/signSuccess?delta=2'
      });
    } else if (payType === 3) {
      uni.setStorageSync('activityPay', params);
      const amount = params.paymentAmount / 1000;
      uni.navigateTo({
        url: `/pages/common/waterPay?type=activity&orderAmount=${amount}`
      });
    }
  } catch (error) {}
}

const activityId = ref('');
const type = ref(1); // 1 需要购买  2 查看已购买的
const activityRightsList = ref([]);
const myPayList = ref([]);

onLoad((options) => {
  activityId.value = options.id;
  type.value = Number(options.type);
  const storage = uni.getStorageSync('interests');
  if (storage) {
    activityRightsList.value = storage.activityRightsList;
    myPayList.value = storage?.myPayList || [];
  }
  uni.removeStorage({
    key: 'activityPay'
  });
});
</script>

<style lang="scss" scoped>
.list-li {
  border: 4rpx solid transparent;
  &.active {
    border-color: #1484ee;
  }
  &.disabled {
    opacity: 0.5;
  }
  .circle {
    position: absolute;
    top: 0;
    width: 40rpx;
    height: 40rpx;
    background-color: #ffffff;
    border: 2rpx solid #e6e6e6;
    border-radius: 80rpx;
  }
}
</style>
